<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-10 18:05:06
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiIcon\uiIcon.vue
 * CIMC-V2
-->
<template>
  <div :id="info._id" :ref="info._id" :style="`width:${setSize}px;height:${setSize}px`">
    <template v-if="setIcon.type == 'icon'">
      <vui-icon
        v-if="setIcon.iconField.value"
        class="vui-dropdown"
        :icon="setIcon.iconField.value"
        :style="`font-size:${setSize}px;color:${setIcon.colorField}`"
      />
    </template>
    <template v-if="setIcon.type == 'img'">
      <img class="w-full" :src="setIcon.imgField" />
    </template>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  import trim from 'lodash/trim'
  //import cloneDeep from 'lodash/cloneDeep'
  //import { getComponentDefaulType } from '@ve/utils/utils'
  export default defineComponent({
    name: 'UiIcon',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        size: {
          mini: 40,
          small: 60,
          medium: 80,
          large: 100,
        },
        setIcon: {
          valueField: '',
          colorField: '',
          type: 'icon', //类型icon img(上传)
          iconField: {
            type: '',
            name: '',
            value: '',
          },
          imgField: '',
        },
      }
    },
    computed: {
      setSize() {
        return this.getInfo.extension.width.value || this.size[this.getInfo.extension.size.value]
      },
      getItemFormData() {
        return this.getInfo.data.formData
      },
    },
    watch: {
      getItemFormData: {
        deep: true,
        handler(newval) {
          this.setOptions(newval)
        },
      },
    },
    created() {},
    mounted() {
      //添加class
      this.position(this.getInfo.extension.position.value)
      this.setOptions(this.getItemFormData)
    },
    methods: {
      position(newval) {
        //document.getElementsByClassName('uiIcon')[0].classList.add(newval)
        let text = ''
        switch (newval) {
          case 'lefttop':
            text = 'left: 0;top: 0;'
            break
          case 'leftbottom':
            text = 'left: 0;bottom: 0;'
            break
          case 'righttop':
            text = 'right: 0;top: 0;'
            break
          case 'rightbottom':
            text = 'right: 0;bottom: 0;'
            break
        }
        //暂时处理成这样 以后调整
        const nodes = document.querySelectorAll('div.uiIcon')
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].getAttribute('data-com-id') === this.getInfo._id) {
            nodes[i].style.cssText = text
          }
        }
      },
      //替换所有
      replaceArray(str, from, to) {
        let obj = {},
          regex
        from.forEach(function (item, idx) {
          obj[item] = to[idx]
        })

        regex = new RegExp('(' + from.join('|') + ')', 'g')
        return str.replace(regex, function (match) {
          return obj[match]
        })
      },
      //数据+计算条件
      logicalCalculation(data = {}, formulaStr = '') {
        console.log('计算条件 1', data, formulaStr)

        // 1先提取出公式变量
        let _formulaStrArr = []
        try {
          let _fs = formulaStr.match(/#{[^#{]+}/gi)
          console.log('计算条件 公式变量', _fs)
          if (_fs != null && _fs.length > 0) {
            _formulaStrArr = _fs
          }
        } catch (e) {
          console.log('计算条件 先提取出公式变量出错：', e)
        }
        //2 提取变量对应的值
        let _values = []
        try {
          _formulaStrArr.forEach((item) => {
            _values.push(data[trim(item.substring(2, item.length - 1))])
          })
        } catch (e) {
          console.log('计算条件 提取变量对应的值:', e)
        }
        let conditionStr = this.replaceArray(formulaStr, _formulaStrArr, _values)

        console.log('计算条件 测试', _formulaStrArr, _values, conditionStr)
        let flag = false
        try {
          // 执行字符串
          flag = Function('"use strict";return (' + conditionStr + ')')()
        } catch (error) {
          console.log('执行条件error', error)
          flag = false
        }
        console.log('计算条件 结果', flag)
        return flag
      },
      setOptions(formData = {}) {
        // formData 对象
        const optionsArr = this.getInfo.extension.optionConfig.value || []
        console.log('newval', formData, optionsArr)
        optionsArr.forEach((item) => {
          //公式
          let _has = this.logicalCalculation(formData, item.valueField)
          //满足计算公式 多个条件都满足走最后一个
          if (_has) {
            this.$data.setIcon = item
          }
        })
      },
    },
  })
</script>
<style>
  .uiIcon.relative {
    position: absolute;
    z-index: 10;
  }
</style>
